<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>

</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(1)"/>

<!--动检通菜单-->
<div id="topnav" th:replace="djt/partial/topnav :: topnav(7)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/cert_left :: nav(1)"/>

    <div class="container-fluid" id="pcont">

        <div class="row">
            <div class="col-md-12">
                <div class="block-flat">
                    <div class="header"><h3>动物开证统计</h3></div>
                    <div class="content">
                        <div class="table-responsive">
                            <div id="datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">


                                <div class="row">

                                    <!-- search-->
                                    <div class="row" style="margin-left: 60px">
                                        <div id="app" style="white-space: nowrap">
                                            <div class="col-sm-2">
                                                <div class="input-group date datetime col-md-5 col-xs-7"
                                                     data-min-view="2" data-date-format="yyyy-mm-dd">
                                                    <input id="start" class="form-control" style="width: 90px;"
                                                           size="16"
                                                           type="text" value="" placeholder="开始时间" readonly>
                                                    <span class="input-group-addon btn btn-primary"><span
                                                            class="glyphicon glyphicon-th"></span></span>
                                                </div>
                                            </div>
                                            <div class="col-sm-2">
                                                <div class="input-group date datetime col-md-5 col-xs-7"
                                                     data-min-view="2" data-date-format="yyyy-mm-dd">
                                                    <input id="end" class="form-control" style="width: 90px;" size="16"
                                                           type="text" value="" placeholder="结束时间" readonly>
                                                    <span class="input-group-addon btn btn-primary"><span
                                                            class="glyphicon glyphicon-th"></span></span>
                                                </div>


                                            </div>

                                            <span style="margin-left: 10px">   启运地:
                                                           <select class="select2" style="max-width: 100px;"
                                                                   id="startarea">
                                                           <option value="全部">所有区域</option>
                                                               <span th:each="string :${startList}">
                                                          <option th:value="${string}"
                                                                  th:text="${string}">南漳县</option>
                                                               </span>
                                                                 </select>

                                            </span>
                                            <span style="margin-left: 50px">   目的地:
                                                           <select class="select2" style="max-width: 100px;"
                                                                   id="endarea">
                                                           <option value="全部">所有区域</option>
                                                               <span th:each="cityAreaDto :${areaList}">
                                                            <optgroup th:label="${cityAreaDto.city}">
                                                                <span th:each="region :${cityAreaDto.regions}">
                                                            <option th:value="${region}"
                                                                    th:text="${region}">南漳县</option>
                                                                    </span>
                                                          </optgroup>
                                                                   </span>
                                                                 </select>

                                            </span>




                                        </div>
                                    </div>
                                    <div class="row" style="margin-left: 50px">
                                        <span >   畜种:
                                           <select style="max-width: 100px;"class="select2"
                                                   id="type">
                                               <option value="0">全部</option>
                                               <option value="1">猪 </option>
                                               <option value="2">牛 </option>
                                               <option value="3">羊 </option>
                                               <option value="4">家禽</option>

                                                 </select>

                                        </span>

                                        <span style="margin-left: 50px">   证章类型:


                                           <select id="cert" style="max-width: 150px;" class="select2">
                                               <option value='1'>请选择</option>
                                                <option value='1'>动物A证</option>
                                                <option value='2'>动物B证</option>





                                            </select>

                                         </span>
                                        <span style="margin-left: 50px">   统计方式:


                                           <select id="count" style="max-width: 150px;" class="select2">

                                               <option value='1'>请选择</option>
                                                <option value='1'>按启运地统计</option>
                                               <option value='2'>按目的地统计</option>




                                            </select>

                                         </span>
                                        <span style="margin-left: 50px">
                                                <button class="btn btn-primary" id="" onclick="SearchBtn()">搜索</button>
                                                </span>

                                    </div>


                                    <div class="row">


                                        <!-- Table -->
                                        <!-- <table class="tableList">
                                             <thead>
                                             <tr style="background: rgb(244, 244, 244); width: 380px;">
                                                 <th colspan="5" id="title" style="font-size: 15px;">2017-06-01 至
                                                     2017-07-25
                                                     按起运地统计; 启运地：浙江省 金华市; 目的地：浙江省 湖州市
                                                 </th>
                                             </tr>
                                             <tr>
                                                 <th rowspan="2" width="40px"></th>
                                                 <th id="animal" style="border: 1px solid #DDDDDD" colspan="2"
                                                     width="80px"
                                                     align="center">猪
                                                 </th>
                                                 <th colspan="2" width="80px">合计</th>
                                             </tr>
                                             </thead>
                                             <tbody>
                                             &lt;!&ndash; Table &ndash;&gt;
                                             <tr>

                                             </tr>
                                             </tbody>

                                         </table>-->
                                        <table id="jqGrid"></table>
                                        <div id="jqGridPager"></div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function () {

        App.init();

        //grid
        $("#jqGrid").jqGrid({
            url: '/djt/cert/animalsearch',
            mtype: "GET",
            styleUI: 'Bootstrap',
            datatype: "json",
            autowidth: true,
            colNames: ['启运地', '开证数量', '畜禽数量', '开证总数量', '畜禽总数量'],
            colModel: [
                {label: 'area', name: 'name', key: true, width: 100, align: 'center', formatter: showarea},
                {label: 'certnum', name: 'certnum', width: 100, align: 'center', formatter: showallcert},
                {label: 'animalnum', name: 'animalnum', width: 100, align: 'center', formatter: showname},
                {label: 'allcert', name: 'certnum', width: 100, align: 'center',formatter: showall1},
                {label: 'allanimal', name: 'animalnum', width: 100, align: 'center',formatter: showall2},
            ],

            viewrecords: true,
            caption: null,
            sortname: '启运地',
            sortorder: "desc",
            height: 600,
            rowNum: 20,
            pager: "#jqGridPager",
        });

        $("#jqGrid").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders: [
                {
                    startColumnName: 'name',
                    numberOfColumns: 5,
                    titleText: $("#start").val() + "至" + $("#end").val() + a() + "; 启运地：" + $("#startarea").val() + "; 目的地：" + $("#endarea").val()
                }
            ]
        });

        $("#jqGrid").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders: [
                {startColumnName: 'certnum', numberOfColumns: 2, titleText: type($("#type").val())},
                {startColumnName: 'allcert', numberOfColumns: 2, titleText: '合计'}
            ]
        });


    })


    function showallcert(cellvalue, options, rowObject) {
        return rowObject.name != "合计" ? cellvalue : '';
    }
    function showall1(cellvalue, options, rowObject) {
        return rowObject.name == "合计" ? rowObject['allcert'] : rowObject['certnum'];
    }
    function showall2(cellvalue, options, rowObject) {
        return rowObject.name == "合计" ? rowObject['allanimal'] : rowObject['animalnum'];
    }
    function showname(cellvalue, options, rowObject) {
        return rowObject.name != "合计" ? cellvalue : '合计';
    }

    function showarea(cellvalue, options, rowObject) {
        var link;
        var row = JSON.stringify(cellvalue);
        link = "<a href='javascript:void(0)' onclick='SearchBtn(" + row + ")'>" + cellvalue + "</a>";
        return rowObject.name == '合计' ? "" : link;

    }

    function ShowDate(cellvalue, options, rowObject) {
        if (cellvalue != null && cellvalue != "") {
            var timestamp4 = new Date(cellvalue);
            var dt = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
            return dt;
        } else {
            return "";
        }
    }
    function a() {

        if ($("#count").val() == 1) {
            return "按起运地统计";
        } else {
            return "按目的地统计";
        }

    }
    function type(num) {
        switch (Number(num)) {
            case 0:
                return "全部";
                break;
            case 1:
                return "猪";
                break;
            case 2:
                return "牛";
                break;
            case 3:
                return "羊";
                break;
            case 4:
                return "家禽";
                break;
        }
    }


    function SearchBtn(area) {

        var time1 = $("#start").val();
        var time2 = $("#end").val();
        if (area != null && area != "") {
            var startarea = area;
        } else {
            var startarea = $("#startarea").val();
        }
        /*<option value='全部'>所有区域</option>*/
      /*  var obj = document.getElementById("startarea");
        var str = "";
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].value == startarea) {
                str+="<option value='"+obj[i].value+"' selected='selected'>"+obj[i].value+"</option>";
            }else{
                str+="<option value='"+obj[i].value+"'>"+obj[i].value+"</option>";
            }
        }
        $("#startarea").html("");
        $("#startarea").html(str);*/

        var endarea = $("#endarea").val();
        var type1 = $("#type").val();
        var count = $("#count").val();
        var cert = $("#cert").val();
        var animal = type($("#type").val());
        var title = startarea + "至" + $("#end").val() + a() + "; 启运地：" + $("#startarea").val() + "; 目的地：" + $("#endarea").val();
        $("th[role='columnheader'][colspan='2']:first").text(animal);
        $("th[role='columnheader'][colspan='5']").text(title);

        if (time1 == "") {
            time1 = new Date("2000-01-01 :00:00:00");
        } else {
            time1 = new Date(time1);
        }
        if (time2 == "") {
            time2 = new Date();
        } else {
            time2 = new Date(time2);
        }
        var sdata = {   // 构建查询需要的参数
            start: time1,
            end: time2,
            startarea: startarea,
            endarea: endarea,
            type: type1,
            count: count,
            cert: cert

        };

        var postData = $("#jqGrid").jqGrid("getGridParam", "postData");

        $.extend(postData, sdata);

        $("#jqGrid").jqGrid("setGridParam", {
            search: true    // (6)将jqGrid的search选项设为true
        }).trigger("reloadGrid", [{page: 1}]);   // (7)重新载入Grid表格，以使上述设置生效

    }

</script>


</body>
</html>
